<%--@elvariable id="webRoot" type="com.doupi.partner.op.interceptor.OpFilter"--%>
<%--@elvariable id="type" type="com.doupi.partner.op.controller.business.BusinessController.index"--%>

<%@ page language="java" pageEncoding="UTF-8" %>
<%@ include file="../common/tags.jsp" %>

<!DOCTYPE html>
<html>
<head lang="en">
    <%@include file="../common/assets.jsp" %>
</head>
<body>
<!-- header -->
<%@include file="../common/header.jsp" %>

<!-- main start -->
<div class="am-cf admin-main">
    <!-- sidebar start -->
    <%@include file="../common/menu.jsp" %>
    <!-- sidebar end -->

    <!-- content start -->
    <div class="admin-content">

        <div class="am-cf am-padding">
            <div class="am-fl am-cf">
                <strong class="am-text-primary am-text-lg">数据展示</strong> /
                <small>
                    <c:choose>
                        <c:when test="${type == 3}">商家数据</c:when>
                        <c:when test="${type == 2}">收益数据</c:when>
                        <c:when test="${type == 1}">粉丝数据</c:when>
                    </c:choose>
                </small>
            </div>
        </div>

        <div class="am-g" style="margin-bottom: 3%;">
            <div class="am-u-sm-12 am-u-md-6 am-text-left">
                <div class="am-g" style="margin-left: 3%">
                    <h3><strong>数据搜索和导出</strong></h3>
                </div>
                <div class="am-u-sm-12 am-u-md-6">
                    <div class="am-input-group">
                        <span class="am-input-group-label">起始时间</span>
                        <input id='begin_date' type="text" class="am-form-field" readonly="readonly">
                    </div>
                </div>
                <div class="am-u-sm-12 am-u-md-6">
                    <div class="am-input-group">
                        <span class="am-input-group-label">终止时间</span>
                        <input id='end_date' type="text" class="am-form-field" readonly="readonly">
                        <span class="am-input-group-btn">
                                <button type="button" class="am-btn am-btn-secondary" onclick="chart()">查询</button>
                            </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="am-g">
            <div class="am-u-sm-12">
                <form class="am-form">

                </form>
            </div>
        </div>
        <div class="am-g">
            <div class="am-u-sm-12">
                <div class="am-u-sm-12" id="listView">
                </div>
                <div class="am-g" style="height: 1000px">
                    <div id="pie" style="height: 50%;width: 50%;left: 20%;top: 20%"></div>
                </div>
            </div>
        </div>
    </div>

</div>
</div>
<!-- main end -->

<!-- foot -->
<%@include file="../common/footer.jsp" %>
<script src="${webRoot}/assets/js/echarts/echarts.min.js"></script>
<%--统计列表模版--%>
<script type="text/html" id="listTemplate">
    <div style="width: 24.7%; float: left; height: 120px; background: #60d295; border: 1px solid #57c78b; text-align: center; color: #FFFFFF;">
        <div style="width: 100%; float: left; margin-top: 25px; line-height: normal;">
            <a style="font-size: 35px; text-decoration: none; color: #FFFFFF;"
               href="${webRoot}/{{=data[1]}}/{{=data[0]}}/index">{{=name}}</a>
        </div>
        <div style="width: 100%; float: left; line-height: normal;">{{=value}}</div>
    </div>
</script>
<%--总--%>
<script type="text/html" id="sumTemplate">
    <div style="width: 25%; float: right; height: 120px; background: #7cbae5; border: 1px solid #6eb0dd; text-align: center; color: #FFFFFF;">
        <div style="width: 100%; float: left; margin-top: 25px; line-height: normal;">
            <a style="font-size: 35px; text-decoration: none; color: #FFFFFF;"
               href="#">{{=name}}</a>
        </div>
        <div style="width: 100%; float: left; line-height: normal;">{{=value}}</div>
    </div>
</script>
<script type="text/javascript">
    var pie = echarts.init(document.getElementById('pie'));
    pie.showLoading();

    $(function () {
        chart();

        $('#begin_date, #end_date').datetimepicker({
            locale: 'zh-CN',
            format: 'YYYY-MM-DD HH:mm:ss',
            showTodayButton: true,
            ignoreReadonly: true
        });
        $('#begin_date').on('dp.change', function (e) {
            $('#end_date').data('DateTimePicker').minDate(e.date);
        });
        $('#end_date').on('dp.change', function (e) {
            $('#begin_date').data('DateTimePicker').maxDate(e.date);
        });
    });
    /*统计饼图数据*/
    function chart() {
        $('#listView').html("");
        ajaxRequest({
                url: '${webRoot}/chart/${type}/chart',
                data: {
                    beginDate: $('#begin_date').val(),
                    endDate: $('#end_date').val()
                }
            },
            function (data) {
                if (data) {
                    var data = data.data;
                    var echartsData = data['echartsData'];

                    var tempData = echartsData.series[0].data;
                    var listTemplate = AMUI.template('listTemplate');
                    var sumTemplate = AMUI.template('sumTemplate');
                    var sum = 0;
                    $.each(tempData, function (i, value) {
                        var html = listTemplate(value);
                        $('#listView').append(html);
                        sum += Number(value.value);
                    });
                    var object = {
                        name: "总数量",
                        value: sum
                    };
                    var sumShow = sumTemplate(object);
                    $('#listView').append(sumShow);

                    pie.hideLoading();
                    initPieEcharts(echartsData);
                }
            }, true);
    }
    /*统计饼图绘图*/
    function initPieEcharts(chartData) {
        var options = {
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            series: []
        };
        options = $.extend(options, chartData);
        pie.setOption(options);
    }
    /*统计点击事件*/
    /*pie.on('click', function (param) {
     var type = param.data.data[0];
     window.location.href = '${webRoot}/user/' + type + '/index';
     });*/
</script>
</body>
</html>